<template>
	<view class="progress">
		<view class="userinfo-box">
			<view class="header">
				<view class="title">
					<text class="no">NO.</text>
					<text class="num">{{detail.id}}</text>
				</view>
				<view :class="['label', {'running': detail.status == 1}, {'fault': detail.status == 2}, {'scrap': detail.status == 3}, {'leave': detail.status == 10}]">{{deviceStatus[detail.status]}}</view>
			</view>
			<view class="material">
				<view class="userinfo">
					<view class="info-box">
						<view class="name-box">
							<text class="name">{{detail.user_list ? detail.user_list.name : ''}}</text>
							<view class="level">责任民警</view>
						</view>
						<view class="phone">{{detail.user_list ? detail.user_list.phone : ''}}</view>
					</view>
					<view v-if="detail.status == 2" :class="['card', {'uplaod': true}, {'fault': false}]">
						<view class="title">上报计时</view>
						<view class="count-down">{{detail.keepTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="progress-line">
			<view class="day" v-for="(item, index) in list" :key='index'>
				<view class="title">
					<view class="date">{{item.date}}</view>
					<view class="info">
						<text class="year">{{item.year}}</text>
						<text class="time">TIME</text>
					</view>
				</view>
				<view class="time-line">
					<view class="item" v-for="(innerItem, innerIndex) in item.timeLine" :key='innerIndex'>
						<view class="status">{{ innerItem.status ? labelBox[innerItem.status].title : '未知'}}</view>
						<view :class="['dot', {'fault': innerItem.status=='预警' || innerItem.status=='故障' || innerItem.status=='维修失败' || !innerItem.status}, {'running': innerItem.status=='维修' || innerItem.status=='正常'}]"></view>
						<view class="info">
							<view class="sub">{{innerItem.remark.slice(0, 50)}}</view>
							<view class="desc">{{!innerItem.adminname || innerItem.adminname.id==1 ? '系统消息' : innerItem.adminname.nickname}}</view>
						</view>
						<view class="device-status">
							<view :class="['label', {'fault': innerItem.status=='预警' || innerItem.status=='故障' || innerItem.status=='维修失败' || !innerItem.status}, {'running': innerItem.status=='维修' || innerItem.status=='正常'}]">{{innerItem.status ? labelBox[innerItem.status].label : '状态未知'}}</view>
							<view class="time">{{innerItem.created_at.split(' ')[1]}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!isEmpty">
				<load-more :status="loadStatus" color="#333333"></load-more>
			</view>
			<view v-if="isEmpty" class="empty-bar">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import LoadMore from '@/components/uni-load-more/uni-load-more'
	import {
		reportListForApp
	} from '../../api/config'
	export default {
		data() {
			return {
				detail: {}, // 头部详情
				list: [], // 满足格式的list
				page: 1, // 页数
				requestKey: true, // 请求开关
				isEmpty: false, // 是否为空
				loadStatus: 'more', // more loading noMore
				deviceStatus: {
					1: '设备运行中',
					2: '设备已故障',
					3: '设备已报废',
					5: '设备待激活',
					10: '设备已闲置',
					100: '设备预警',
				}, // 设备状态
				labelBox: {
					'预警': {
						title: '预警',
						label: '设备已故障'
					},
					'故障': {
						title: '故障',
						label: '设备已故障'
					},
					'维修': {
						title: '维修',
						label: '设备运行中'
					},
					'正常': {
						title: '正常',
						label: '设备运行中'
					},
					'维修失败': {
						title: '失败',
						label: '设备已故障'
					}
				} // 标签盒子
			};
		},
		components: {
			LoadMore
		},
		onPullDownRefresh() {
			this.init()
			this.getReportList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getReportList()
		},
		onLoad(e) {
			this.detail = JSON.parse(e.info)
			this.keepTime()
			this.getReportList()
		},
		methods: {
			// 上报计时
			keepTime() {
				if (this.detail.status != 2) return
				const target = new Date(this.detail.oldReportTime.create_time).getTime()
				const now = new Date().getTime()
				let diff = now - target * 1000
				let diffArr = this.$durationToTime(diff)
				let hour = parseInt(diffArr[0]) * 24
				hour = hour + parseInt(diffArr[1])
				this.detail.keepTime = `${hour || '00'}:${diffArr[2] || '00'}:${diffArr[3] || '00'}`
				setInterval(() => {
					diff += 1000
					diffArr = this.$durationToTime(diff)
					hour = parseInt(diffArr[0]) * 24
					hour = hour + parseInt(diffArr[1])
					this.detail.keepTime = `${hour || '00'}:${diffArr[2] || '00'}:${diffArr[3] || '00'}`
				}, 1000)
			},
			// 初始化
			init() {
				this.page = 1
				this.isEmpty = false
				this.list = []
				this.requestKey = true
			},
			// 获取记录
			async getReportList() {
				const params = {
					id: this.detail.id,
					page: this.page,
				}
				this.loadStatus = 'loading'
				const [err, res] = await reportListForApp(params)
				if (res) {
					console.log(res)
					const list = res.data.data
					if (list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.isEmpty = true
						return
					} else if (list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					let i = this.list.length == 0 ? 0 : this.list.length-1 // this.list
					let j = 0 // list
					while (j < list.length) { // 遍历list
						let date = list[j].created_at.split(' ')[0]
						if (!this.list[i]) {
							this.list[i] = {}
						}
						if (this.list[i].created_at && this.list[i].created_at == date) {
							this.list[i].timeLine.push(list[j])
						} else {
							if (this.list[i].created_at && this.list[i].created_at != date) {
								i++
							}
							this.list[i] = {}
							let dates = date.split('-')
							this.list[i].created_at = date
							this.list[i].date = dates[1] + '.' + dates[2]
							this.list[i].year = dates[0]
							if (!this.list[i].timeLine) {
								this.list[i].timeLine = []
							}
							this.list[i].timeLine.push(list[j])
						}
					    j++
					}
					if (list.length < res.data.per_page) {
						this.requestKey = false
						this.loadStatus = 'noMore'
					} else {
						this.loadStatus = 'more'
					}
				}
				if (err) {
					this.requestKey = false
					this.isEmpty = true
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	page {
		background-color: $bg-b;
	}

	.progress {
		.empty-bar {
			@include flex-row();
			@include font-set($font-b, $color-h);
		}

		.label {
			@include box(150rpx, 56rpx);
			@include flex-row();
			@include font-set($font-i);
			border-radius: 2rpx;

			&.running {
				background-color: $bg-j;
				color: $bg-g;
			}

			&.fault {
				background-color: $bg-k;
				color: $color-k;
			}

			&.leave {
				background-color: $bg-l;
				color: $color-d;
			}

			&.scrap {
				background-color: $bg-m;
				color: $color-j;
			}
		}

		@include flex-row();

		.userinfo-box {
			@include top(0, fixed);
			// #ifdef H5
			@include top(88rpx, fixed);
			//  #endif
			@include box-w(100%, $bg-a);
			padding: 30rpx 30rpx 0;
			box-shadow: 0 4rpx 16rpx 0 rgba(195, 195, 195, 0.20);


			.header {
				@include box(100%, 102rpx);
				@include flex-row(space-between);
				border-bottom: 2rpx solid #eee;

				.title {
					@include font-set($font-d, $color-c);

					.num {
						color: $color-e;
					}
				}
			}

			.material {
				@include box(100%, 160rpx);

				.userinfo {
					@include box(100%, 128rpx);
					@include flex-row(space-between);

					.info-box {
						@include box(50%, 100%);
						@include flex-col(center, flex-start);

						.name-box {
							@include box-w();
							@include flex-row(flex-start);

							.name {
								@include font-set($font-c, $color-i, 500);
							}

							.level {
								@include box(112rpx, 34rpx);
								border: 2rpx solid $bg-c;
								border-radius: 2rpx;
								@include font-set($font-a, $color-f);
								@include flex-row();
								margin-left: 36rpx;
							}
						}

						.phone {
							@include font-set($font-c, $color-i, 500);
							margin-top: 16rpx;
						}
					}

					.card {
						@include box(150rpx, 112rpx);
						@include font-set($font-i);
						@include flex-col(flex-start);
						margin-top: 20rpx;

						&.fault {
							background-color: $bg-k;
							color: $color-k;
						}

						&.uplaod {
							background-color: $bg-n;
							color: $bg-c;
						}

						.title {
							@include box(100%, 50%);
							@include flex-row();
							align-self: flex-end;
						}

						.count-down {
							@include box(138rpx, 50rpx, $bg-a);
							@include flex-row();
						}
					}
				}
			}
		}

		.progress-line {
			margin-top: 294rpx;
			margin-bottom: 40rpx;
			@include box-w(690rpx, $bg-a);

			.day {
				@include box-w();
				padding: 50rpx 30rpx;

				.title {
					margin-bottom: 30rpx;

					.date {
						@include font-set($font-j, $color-i);
					}

					.info {
						@include flex-row(flex-start);

						.year {
							@include font-set($font-b, $color-i);
						}

						.time {
							@include font-set($font-b, $bg-l);
							margin-left: 8rpx;
						}
					}
				}

				.time-line {
					.item {
						@include box-h(120rpx);
						@include flex-row(flex-start, flex-start);
						margin-top: 160rpx;

						&:first-of-type {
							margin-top: 0;

							.dot {
								&:before {
									content: '';
									@include square(0);
								}
							}
						}

						.status {
							@include font-set($font-c, $color-e);
						}

						.dot {
							position: relative;
							top: 12rpx;
							@include circle(20rpx);
							margin: 0 20rpx;

							&.fault {
								background-color: $bg-h;
							}

							&.running {
								background-color: $bg-g;
							}

							&:before {
								content: '';
								@include box(4rpx, 212rpx, $bg-b);
								@include top(-226rpx, absolute, 95);
							}
						}

						.info {
							@include box(356rpx, 100%);
							padding-top: 2rpx;
							@include flex-col(space-between, flex-start);

							.sub {
								@include box-w(100%);
								@include font-set($font-b, $color-e);
								@include font-hide();
							}

							.desc {
								@include font-set($font-h, $color-c);
								margin-top: 20rpx;
							}
						}

						.device-status {
							@include box(150rpx, 100%);
							@include flex-col(space-between, flex-end);

							.time {
								@include font-set($font-h, $color-c);
							}
						}
					}
				}
			}
		}
	}
</style>
